<template>
  <DIV class="bg_write printorder" v-loading="loading" style="width: 1000px; margin-left: 20px">
    <h1 align="center" style="margin: 20px">订单信息</h1>
    <table width="100%" cellpadding="1" style="line-height: 40px; border-collapse: collapse; border-spacing: 0; table-layout: fixed">
      <tbody>
        <tr>
          <td align="left">收货人：{{ this.base.mail_name }}</td>
          <td align="left">下单时间：{{ this.base.created_time | getTimeFormat }}</td>
          <td align="left">订单编号：{{ this.base.oid }}</td>
        </tr>
        <tr>
          <td align="left">支付方式：{{ this.base.pay }}</td>
          <td align="left">收货地址：{{ this.base.mail_city }} {{ this.base.mail_area }} {{ this.base.mail_address }} &nbsp;</td>
          <td align="left">收货人电话：{{ this.base.mail_tel }}</td>
        </tr>
      </tbody>
    </table>

    <el-table ref="multipleTable" :data="product_ar" border tooltip-effect="dark" style="width: 1000px" :span-method="objectSpanMethod">
      <el-table-column label="商品名称" min-width="150">
        <template slot-scope="scope">
          {{ scope.row.title }}
          <br />
          <span v-for="(vo, index) in scope.row.sku_cn" :key="index">{{ vo }} &nbsp;&nbsp;&nbsp;&nbsp;</span>
        </template>
      </el-table-column>

      <el-table-column label="商品编号" width="100">
        <template slot-scope="scope">{{ scope.row.pid }}</template>
      </el-table-column>

      <el-table-column label="价格" width="100">
        <template slot-scope="scope">￥{{ scope.row.price | keepTwoNum }}</template>
      </el-table-column>

      <el-table-column label="数量" width="70">
        <template slot-scope="scope">{{ scope.row.number }}</template>
      </el-table-column>

      <el-table-column label="价格小计" width="100">
        <template slot-scope="scope">￥{{ scope.row.money | keepTwoNum }}</template>
      </el-table-column>

      <el-table-column label="旅游劵抵扣" width="100">
        <template slot-scope="scope">
          <p v-if="scope.row.is_integral == '1'">使用{{ scope.row.integral_dk_per | keepTwoNum }}抵用{{ scope.row.integral_dk_money | keepTwoNum }}元</p>
          <p v-else>无</p>
        </template>
      </el-table-column>

      <el-table-column label="优惠活动" width="100">
        <template slot-scope="scope">
          <p v-if="scope.row.is_red == '1'">优惠卷抵用{{ scope.row.integral_dk_money | keepTwoNum }}元</p>
          <p v-else>无</p>
        </template>
      </el-table-column>
    </el-table>

    <table width="100%" cellpadding="1" style="line-height: 40px; margin-top: 20px; border-collapse: collapse; border-spacing: 0; table-layout: fixed">
      <tbody>
        <tr>
          <td align="left">配送商电话： <el-input type="text" placeholder="请输入电话" v-model="tel" class="print_input" style="width: 150px"></el-input></td>
          <td align="left">总件数：{{ sum_count }}</td>
          <td align="left">订单总金额：{{ $fnc.toFixedZ(base.sum_price) }}</td>
        </tr>
      </tbody>
    </table>
    <!-- <table width="100%" border="0" style="line-height: 25px">
      <tbody>
        <tr align="right">
          <td>商品总金额：{{ $fnc.toFixedZ(base.sum_price) }}</td>
        </tr>
        <tr align="right">
          <td>邮费：{{ $fnc.toFixedZ(base.sum_mail) }}</td>
        </tr>
        <tr align="right">
          <td>订单总金额：{{ $fnc.toFixedZ(base.money) }}</td>
        </tr>
      </tbody>
    </table> -->

    <!-- <table width="100%" border="0" style="line-height: 40px">
      <tr>
        <td>
        </td>
      </tr>
      <tr align="right">
        <td>打印时间：{{ this.other.print_time }}&nbsp;&nbsp;&nbsp; 操作员：{{ this.other.operator }}&nbsp;</td>
      </tr>
    </table> -->
  </DIV>
</template>
<script>
export default {
  data() {
    return {
      tel: "15880744218",
      options: this.$addressJson,
      selectedOptions: [],
      optionProps: {
        value: "y",
        label: "t",
        children: "z",
      },
      show: false,
      loading: false,
      dialogVisible: false,
      data: {
        province: "",
        city: "",
        area: "",
        town: "",
      },
      base: {
        id: "",
        oid: "",
        uid: "",
        uid_cn: "",
        sid: "",
        money: "",
        product_money: "",
        mail_money: "",
        pay: "",
        is_pay: "0",
        is_virtual: "0",
        status: "",
        integral_reach: "",
        integral_exchange: "",
        mail_name: "",
        mail_tel: "",
        mail_province: "",
        mail_city: "",
        mail_area: "",
        mail_town: "",
        mail_address: "",
        mail_courier: "",
        mail_id: "",
        mail_oid: "",
        mail_time: "",
        remark: "",
        admin_remark: "",
        created_time: "",
        pay_time: "",
        complete_time: "",
        update_time: "",
      },
      product_ar: [],
      other: [],
    };
  },
  components: {},
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(columnIndex, rowIndex);
      // if (columnIndex === 5) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // } else if (columnIndex === 6) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },
    imgError(item) {
      if (!item) {
        return require("../../assets/img/default_head.png");
      }
      if (item.indexOf("http") >= 0) {
        return item;
      } else {
        return "/api/" + item;
      }
    },
    handleChange(value) {
      console.log(value);
      if (value) {
        for (var i = 0; i < value.length; i++) {
          console.log(value[i]);
          if (i == 0) this.base.mail_province = value[i];
          if (i == 1) this.base.mail_city = value[i];
          if (i == 2) this.base.mail_area = value[i];
          if (i == 3) this.base.mail_area = value[i];
        }
      }
    },
    showEditMailDialog() {
      this.dialogVisible = true;
    },
    getDetails(id) {
      console.log(id);
      var data = {};
      data["id"] = id;
      this.$api.getUser.getOrderInfo(data).then((res) => {
        console.log(res.data.result);

        this.base = res.data.result.base;
        if (this.base.pay_time) {
          this.base.pay_time = this.$fnc.vuetime(this.base.pay_time);
        }
        if (this.base.mail_time) {
          this.base.mail_time = this.$fnc.vuetime(this.base.mail_time);
        }
        if (this.base.complete_time) {
          this.base.complete_time = this.$fnc.vuetime(this.base.complete_time);
        }

        this.product_ar = res.data.result.product_ar;
        this.selectedOptions = [this.base.mail_province, this.base.mail_city, this.base.mail_area];
        if (this.base.mail_town) {
          this.selectedOptions.push(this.base.mail_town);
        }
        this.other = res.data.result.other;
        console.log(this.selectedOptions);
      });
    },
    addUpdate() {
      var data = {};
      data["id"] = this.base.id;
      data["pay_time"] = this.$fnc.phptime(this.base.pay_time);
      data["mail_time"] = this.$fnc.phptime(this.base.mail_time);
      data["complete_time"] = this.$fnc.phptime(this.base.complete_time);
      data["is_pay"] = this.base.is_pay;
      data["remark"] = this.base.remark;
      data["admin_remark"] = this.base.admin_remark;
      this.$api.getUser.updateOrderInfo(data).then((res) => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({ text: "提交成功" });
          this.visible = false;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    subForm() {
      var data = {};
      data["id"] = this.base.id;
      data["mail_name"] = this.base.mail_name;
      data["mail_tel"] = this.base.mail_tel;
      data["mail_province"] = this.base.mail_province;
      data["mail_city"] = this.base.mail_city;
      data["mail_area"] = this.base.mail_area;
      data["mail_town"] = this.base.mail_town;
      data["mail_address"] = this.base.mail_address;
      data["admin_remark"] = this.base.admin_remark;

      this.$api.getUser.getEditMail(data).then((res) => {
        if (res.data.status == 1 && res.data.code == 200) {
          this.$fnc.alertSuccess({ text: "修改成功" });
          this.visible = false;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
  },

  beforeCreate() {
    this.loading = true; //数据未加载之前调用loading
  },
  created() {
    if (document.getElementById("app")) {
      document.getElementById("app").style.flex = "none";
      document.getElementById("app").style.overflow = "unset";
    }
    this.loading = false;
  },
  computed: {
    sum_count() {
      var count = 0;
      this.product_ar.forEach((item, i) => {
        count = count + Number(item.number);
      });
      return count;
    },
  },
  watch: {},
  mounted() {
    this.getDetails(this.$route.query.id);
  },
};
</script>

<style lang="less" scoped>
body,
td {
  font-size: 14px;
}
.printorder {
  /deep/.el-table .cell {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  /deep/.el-table td {
    padding: 6px 0 !important;
  }
  /deep/.el-table__body {
    border-bottom: 1px solid #333;
  }
  .el-table {
    border: 1px solid #333;
    border-bottom: 0;
  }
  /deep/.el-table td.el-table__cell,
  /deep/.el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #333;
  }
  /deep/ .el-table--border .el-table__cell {
    border-right: 1px solid #333;
  }
  .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-right: 1px solid #333;
  }
}

// .info{
//    margin-left:20px;
// }

// .info li{
//     // display: inline-block;
//     float: left;
//     width: 30%;
//     margin:10px 5px 5px 0;
// }
// .box{
//     margin-left:20px;
//     margin-right:20px;
//     margin-top:50px;
// }
// .count{
//     line-height: 40px;
// }
/deep/.print_input .el-input__inner {
  border: none;
}
</style>
